<template>
  <div class="home">
    <div class="home-header">
      <nav-header></nav-header>
    </div>
    <div class="recommend">
      <scroll ref="scroll" class="recommend-content" :data="discList"
              :listen-scroll="listenScroll"
              :probe-type="probeType"
              @scroll="scroll">
        <div>
          <div class="home-scroll-box">
            <div v-if="sliderData.length" class="slider-wrapper" ref="sliderWrapper">
              <slider>
                <div v-for="item in sliderData">
                  <a :href="item.linkUrl">
                    <img class="needsclick" :src="item.picUrl" @load="loadImg" onerror="onerror=null;src='../../static/img/icon_msg_healthplan.png'">
                  </a>
                </div>
              </slider>
              <!--<div class="banner-space"></div>-->
            </div>
            <!--两大功能入口-->
            <ul class="quick-nav">
              <li>
                <router-link :to="{path: '/examination', query:{prev: 'therapy'}}" class="bg-yy">
                  <h3>康复理疗</h3>
                  <p>优质服务 专业康复</p>
                  <span class="tag-hollow">热门</span>
                </router-link>
              </li>
              <li>
                <router-link :to="{path: '/examination', query:{prev: 'examination'}}" class="bg-zz">
                  <h3>预约体检</h3>
                  <p>直达医院 快速体检</p>
                  <span class="tag-hollow">极速</span>
                </router-link>
              </li>
            </ul>
            <!-- 各个频道入口 -->
            <div v-once class="sort-goods">
              <div v-for="item in productItems">
                <router-link :to="item.href">
                  <mu-paper class="demo-paper img-container" circle :zDepth="2">
                    <img class="sort-goods-img" v-bind:src="item.preImg" alt="product" onerror="onerror=null;src='../../static/img/icon_msg_healthplan.png'">
                  </mu-paper>
                  <!--<img class="sort-goods-img" v-bind:src="item.preImg" alt="product" onerror="onerror=null;src='../../static/img/icon_msg_healthplan.png'">-->
                  <p>{{item.name}}</p>
                </router-link>
              </div>
            </div>
            <!--定位出现的送药上门合作药店-->
            <div class="pharmacy-container">
              <router-link to="/shop" class="pharmacy-container-a">
                <h3 class="pharmacy-name"><img src="../../static/img/located.png"/>云之家大药房（华南农业大学华山区分店）</h3>
                <ul class="pharmacy-label">
                  <li>20元起送</li>
                  <li>免配送费</li>
                  <li>当日送达</li>
                </ul>
                <div class="pharmacy-activity">
                  <!--<i class="circle">惠</i>-->
                  <p class="content">满199元减25元</p>
                </div>
              </router-link>
            </div>
            <!-- 详细分类入口 -->
            <section class="consultation" ref="consulation">
              <ul class="consultation-header">
                  <li>
                    <p>快速咨询</p>
                    <span>首问免费</span>
                  </li>
                  <li>
                    <p>专家咨询</p>
                    <span>三甲名医</span>
                  </li>
                </ul>
              <ul class="consultation-wrapper">
                <li v-for="item in consulations">
                  <h3 :style="{color: item.color}">{{item.name}}</h3>
                  <span>{{item.description}}</span>
                  <div class="icon" :style="{backgroundColor: item.backColor}"><img :src="'../../static/img/'+item.icon"></img></div>
                </li>
              </ul>
            </section>
            <!-- 我关注的医生 -->
            <section class="concernedDoctor">
              <div class="concernHeader">我关注的医生</div>
                <div class="wrapper">
                  <scrollx class="doctorList"
                           :childrenWidth="childrenWidth"
                  ref="doctorsList">
                    <div class="doctor" v-for="item in doctors">
                      <img class="img" src="../../static/img/person.png"/>
                      <p class="name">{{item.name}}</p>
                    </div>
                    <div class="doctor addDoctor">
                      <img class="img" src="../../static/img/add.png"/>
                      <p class="name">+ 添加</p>
                    </div>
                  </scrollx>
                </div>
            </section>
          </div>
        </div>
      </scroll>
    </div>
    <!-- 底部导航 -->
    <nav-footer :currentIndex="0"></nav-footer>
  </div>
</template>
<script type="text/javascript">
  import {getSlider, getDoctor} from "../api/home"
  import {ERR_OK} from "../api/config"
  import Scroll from "../components/scroll/scroll";
  import NavFooter from "../components/footer/navFooter";
  import aa from  '../../static/virtualData/list'
  import NavHeader from "../components/navHeader/navHeader";
  import Slider from "../components/slider/slider";
  import {prefixStyle} from "../common/js/dom";
  import Scrollx from "../components/slider/scrollx";

  const transform = prefixStyle('transform')

  export default {
    name: 'home',
    data () {
      return {
        sliderData: '',
        productItems:[
          {name:"在线问医",preImg:"../static/img/1.png",sortId:6,href:""},
          {name:"预约养老院",preImg:"../static/img/2.png",sortId:7,href:"/oldPeopleHome"},
          {name:"预约挂号",preImg:"../static/img/3.png",sortId:8,href:""},
          {name:"送药上门",preImg:"../static/img/4.png",sortId:9,href:""}
        ],
        consulations: [],
        discList:[],
        scrollY: 0,
        childrenWidth: 5.6,
        doctors: []
      }
    },
    beforeCreate () {
      // 可以在这加个loading事件
    },
    created () {
      // 在这结束loading，还做一些初始化，实现函数自执行
      this.consulations = aa.consultation
      this.discList.push(aa)
      this.listenScroll = true
      this.probeType = 3
    },
    mounted () {
     // 发起后端请求
      this._getSliderData()
      this._getDoctor()
    },
    methods: {
      _getSliderData () {
        getSlider().then((res) => {
          let response = res.data
          if (response.code === ERR_OK) {
            this.sliderData = res.data.result
          }
        }).catch((err) => {
          console.log('获取轮播图失败')
        })
      },
      _getDoctor () {
        getDoctor().then((res) => {
          let response = res.data
          if (response.code === ERR_OK) {
            this.doctors = response.result
            setTimeout(() => {
              this.$refs.doctorsList.refresh()
            }, 1000)
          }
        }).catch((err) => {
          console.log('获取关注的医生失败')
        })
      },
      scroll (pos) {
        this.scrollY = pos.y
      },
      loadImg () {
        if (!this.checkLoad) {
          this.checkLoad = true
          // this.$nextTick(() => {
          //   this.$refs.scroll.refresh()
          // })
          setTimeout(() => {
            this.$refs.scroll.refresh()
          }, 20)
        }
      }
    },
    watch: {
      "$route" (to, from) {
        this._getDoctor()
      },
      scrollY (newValue) {
        let target = document.querySelector('.nav-header')
        let scrollTop = Math.abs(newValue)
        if (newValue < 0) {
          // background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
          // background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
          // background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
          // background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后）
          let linear = (((scrollTop / 150) > 0.9) ? 1 : (scrollTop / 150))
          target.style.opacity = 1
          target.style.background = `-webkit-linear-gradient(left top, rgba(29, 125, 237, ${linear}) , rgba(214, 247, 252, ${linear})`
          target.style.background = `-o-linear-gradient(bottom right, rgba(29, 125, 237, ${linear}) , rgba(214, 247, 252, ${linear})`
          target.style.background = `-moz-linear-gradient(bottom right, rgba(29, 125, 237, ${linear}) , rgba(214, 247, 252, ${linear})`
          target.style.background = `linear-gradient(to bottom right, rgba(95, 139, 247, ${linear}) , rgba(95, 194, 249, ${linear})`
          // target.style.backgroundColor = `rgba(33, 150, 243, ${linear})`
        } else {
          target.style.opacity = ((1 - (scrollTop / 30)) < 0) ? 0 : (1 - (scrollTop / 30))
        }
      }
    },
    components: {
      Scrollx,
      Slider,
      NavHeader,
      NavFooter,
      Scroll
    }
  }
</script>
<style type="text/css" lang="scss">
  @import "../common/sass/mixin";
  .home{
    height: 100vh;
    position: relative;
    overflow: hidden;
    .home-header{
      overflow: hidden;
      height: 90px;/*rem*/
      a{
        position: relative;
      }
    }
    .recommend{
      background-color: #F5F5F5;
      position: absolute;
      width: 100%;
      height: 100vh;
      top: 0;
      bottom: 0;
      overflow: hidden;
      .recommend-content{
        height: 100%;
        overflow: hidden;
        .home-scroll-box{
          padding-bottom: 100px;/*rem*/
          .slider-wrapper{
            position: relative;
            width: 100%;
            overflow: hidden;
            .needsclick{
              position: absolute;
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
            }
          }
          .quick-nav{
            background: #fff;
            overflow: hidden;
            li{
              float: left;
              width: 50%;
              font-size: 0;
              a{
                display: block;
                height: 100%;
                width: 100%;
                background-size: auto 100%;
                background-position: right bottom;
                background-repeat: no-repeat;
                padding: 34px 0 28px 18px;/*rem*/
                h3{
                  font-size: 28px;/*px*/
                  color: #5b5b5b;
                }
                p{
                  font-size: 18px;/*px*/
                  color: #b3b3b3;
                }
                .tag-hollow{
                  margin-top: 8px;/*rem*/
                  display: inline-block;
                  padding: 4px 12px;/*rem*/
                  color: #fe5b2a;
                  font-size: 18px;/*rem*/
                  vertical-align: middle;
                  line-height: 1;
                  border: 1px solid #fe5b2a;
                  border-radius: 20px;/*rem*/
                }
              }
              a.bg-yy{
                background-image: url("../../static/img/yygh.png");
              }
              a.bg-zz{
                background-image: url("../../static/img/zxys.png");
              }
            }
            &:before{
              content: "";
              display: block;
              height: 16px;
              width: 100%;
            }
          }
          .sort-goods{
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-start;
            background-color: white;
            margin-top: 20px;/*rem*/
            padding: 35px 0px;/*rem*/
            a{
              color: #343434;
              display: block;
              font-size: 0;
              .img-container{
                display: inline-block;
                height: 110px;/*rem*/
                width: 110px;/*rem*/
                .sort-goods-img{
                  height: 100%;
                  width: 100%;
                }
              }
              p{
                margin-top: 14px;/*rem*/
                font-size: 26px;/*px*/
                text-align: center;
              }
            }
            & > div{
              width: 25%;
              text-align: center;
            }
          }
          .pharmacy-container{
            margin-top: 20px;/*rem*/
            padding: 42px 20px;/*rem*/
            background-color: #fff;
            background: -webkit-linear-gradient(#f8fffb, #ffffff); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(#f8fffb, #ffffff); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(#f8fffb, #ffffff); /* Firefox 3.6 - 15 */
            background: linear-gradient(#f8fffb, #ffffff); /* 标准的语法（必须放在最后） */
            font-size: 0;
            .pharmacy-container-a{
              background-image: url("../../static/img/swt-icon.png");
              background-repeat: no-repeat;
              background-size: 120px 120px;/*rem*/
              background-position: right top;
              .pharmacy-name{
                display: flex;
                align-items: center;
                color: #333333;
                font-size: 28px;/*px*/
                img{
                  height: 35px;/*rem*/
                  width: 35px;/*rem*/
                }
              }
              .pharmacy-label{
                display: flex;
                margin-top: 16px;/*rem*/
                font-size: 0;
                li{
                  font-size: 22px;/*px*/
                  color: #aaaaaa;
                  &:after{
                    content: "";
                    border-right: 1px solid #b3b3b3;
                    margin: 0 10px;/*rem*/
                  }
                  &:last-child:after{
                    content: "";
                    border: none;
                  }
                }
              }
              .pharmacy-activity{
                margin-top: 16px;/*rem*/
                position: relative;
                /*height: 0.75rem;*/
                .content{
                  background-image: url("../../static/img/discount.png");
                  background-repeat: no-repeat;
                  background-position: top left;
                  background-size: 34px 34px;/*rem*/
                  display: inline-block;
                  background-color: #fdf5e7;
                  color: #eaaa3f;
                  vertical-align: middle;
                  border: 1px solid #f7dda8;
                  border-radius: 30px;/*rem*/
                  font-size: 22px;/*px*/
                  padding: 0 10px 0 40px;/*rem*/
                }
              }
            }
          }
          .consultation{
            background-color: #ffffff;
            margin-top: 20px;/*rem*/
            padding: 25px 0;/*rem*/
            .consultation-header{
              display: flex;
              height: 140px;
              li{
                flex: 1;
                font-size: 0;
                padding: 0 20px;
                background-repeat: no-repeat;
                background-size: 120px 120px;
                background-position: right 20px top 0px;
                p{
                  font-size: 28px;/*px*/
                  margin-top: 35px;
                  color: #353535;
                  display: flex;
                  align-items: center;
                  &:after{
                    content: "";
                    display: block;
                    height: 14px;
                    width: 14px;
                    margin-left: 14px;
                    border-bottom: 14px solid transparent;
                    border-left: 14px solid #aaaaaa;
                    border-right: 14px solid transparent;
                    border-top: 14px solid transparent;
                  }
                }
                span{
                  font-size: 24px;/*px*/
                  color: #ababab;
                }
                &:first-child{
                  background-image: url("../../static/img/staff.png");
                  border-right: 1px solid #f0f0f0;
                }
                &:last-child{
                  background-image: url("../../static/img/specialist.png");
                }
              }
            }
            .consultation-wrapper{
              margin-top: 24px;
              display: flex;
              font-size: 0;
              li{
                flex: 1;
                text-align: center;
                border-right: 1px solid #f0f0f0;
                height: 164px;
                h3{
                  font-size: 24px;/*px*/
                }
                span{
                  font-size: 20px;/*px*/
                  color: #bbbbbb;
                }
                .icon{
                  height: 80px;
                  width: 80px;
                  border-radius: 30px;
                  background-color: aqua;
                  margin: 5px auto;
                  img{
                    height: 100%;
                    width: 100%;
                    border-radius: 30px;
                  }
                }
                &:last-child{
                  border: none;
                }
              }
            }
          }
          .concernedDoctor{
            margin-top: 20px;
            background-color: #ffffff;
            .concernHeader{
              @include font-dpr(28px);
              color: #343434;
              line-height: 80px;
              padding: 0 20px;
            }
            .wrapper{
              width: 100%;
              overflow: hidden;
              .doctorList{
                overflow: hidden;
                padding-bottom: 15px;
                .doctor{
                  display: inline-block;
                  text-align: center;
                  .img{
                    height: 80px;
                    width: 80px;
                    border: none;
                    border-radius: 30px;
                  }
                  .name{
                    @include font-dpr(20px);
                    color: #454545;
                  }
                }
                .addDoctor{
                  img{
                    background-color: #f4f4f4;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

</style>
